<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{message | capig}}</p>
</div>
<div id="app2">
    <p>{{message | capig}}</p>
    <input type="text" v-model="username"/>
    <input type="text" v-model="objWatch.id"/>
    <input type="text" v-model="objWatch.name"/>
    <input type="text" v-model="r"/>
    <input type="text" v-model="g"/>
    <input type="text" v-model="b"/>
    <div>{{rgb}}</div>

</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
    Vue.filter("capig", function (val) {
        return val.charAt(0).toUpperCase() + val.slice(1);
    })
    const vm = new Vue({
        // 表示vm实例要控制哪个dom
        el: "#app",
        // 渲染到页面的数据
        data: {
            message: "xixi"
        },
        methods: {},
        filters: {
            capi(val) {
                return val.charAt(0).toUpperCase() + val.substring(1, val.length);
            }
        },
    });
    const vm2 = new Vue({
        el: "#app2",
        data: {
            message: "wocao",
            username: "",
            objWatch: {
                id: 1,
                name: "sb"
            },
            r: 0,
            g: 0,
            b: 0,
        },
        watch: {
            username: {
                handler(newVal, oldVal) {
                    console.log(newVal);
                    console.log(oldVal);
                },
                immediate: true, // 页面刚进来时触发watch
            },
            objWatch: {
                handler(newVal, oldVal) {
                    console.log(newVal);
                    console.log(oldVal);
                },
                deep: true, // 对象中某个树形变化也会触发监听
            },
            "objWatch.name"(newVal) {
                console.log(newVal);
            },

        },
        computed: {
            rgb() {
                return `rgb(${this.r},${this.g},${this.b}))`
            }
        },
    })

</script>
</body>
</html>